<template>
  <div id="app">
    <router-view></router-view>
    <pop :popshow="pop.popshow" :popstyle="pop.popstyle">
      <div id="verify_container">
        <div v-show="!verify.failed">
          <div class="verify-bar">
            <label for="verify_name">教职工号</label>
            <input id="verify_name" type="text" v-model="verify.name">
          </div>
          <div class="verify-bar">
            <label for="verify_pw">登录密码</label>
            <input id="verify_pw" type="password" v-model="verify.pw">
          </div>
        </div>
        <div id="verify_fail" v-show="verify.failed">
          {{verify.tip}}
        </div>
        <div id="btn_container">
          <div class="c-btn reverse" :class="{disabled: verify.loading || !verify.name || !verify.pw}">
            <span v-if="!verify.failed && !verify.loading" @click="verifyUser">用户认证</span>
            <span v-if="verify.loading">认证中</span>
            <span v-if="verify.failed" @click="reverify">重新认证</span>
          </div>
        </div>
      </div>
    </pop>
  </div>
</template>

<script>
import { getParameterByName, myHttp } from './page/RepairProject/assets/js/utils.js'
import { wxLogin, getUser } from './assets/js/common.js'
import pop from './page/RepairProject/Pop.vue'
  export default {
    name: 'app',
    data(){
    	return{
    		  pop: {
    		    popshow: false,
    		    popstyle: {
    		      width: '7.4rem'
    		    }
    		  },
    		  verify:{
    		    name:'',
    		    pw:'',
    		    failed: false,
    		    tip: '验证失败'
    		  }
    		}
    },
    methods:{
    	verifyUser(){
    	  if(this.verify.loading || !this.verify.name || !this.verify.pw) return;
    	  myHttp('bindingUser.do', {
    	    logInName: this.verify.name,
    	    passWord: this.verify.pw,
    	    openId: localStorage.getItem('openId')
    	  }, () => {
    	    this.verify.loading = true;
    	  }).then(r => {
    	  	this.verify.loading = false;
    	    if(r.failed) {
    	    	this.verify.failed = true;
    	    	this.verify.tip = r.desc;
    	    } else {
    	    	getUser().then(user => location.reload());
    	    }
    	  })
    	},
    	reverify(){
    	  this.verify.failed = false;
    	  this.verify.name = this.verify.pw = '';
    	}
    },
    mounted(){
    	wxLogin();
    	// 判断用户是否已绑定
    	getUser().then(user => {
    	  if(!user && process.env.NODE_ENV !== 'development') this.pop.popshow = true;
    	})
    },
	components: {pop}
  }
</script>
<style lang='less' scoped>
@baseColor: #64A6F2;
#verify_container{
  background: #fff;
  border-radius: 0.07rem;
  padding: .5rem 0;
  .verify-bar{
    width:5.9rem;
    border: 1px solid @baseColor;
    border-radius: 0.47rem;
    font-size: .3rem;
    color: @baseColor;
    margin: .5rem auto;
    padding: .15rem .3rem;
    input{
      border: none;
      font-size: .3rem;
      margin-left: .2rem;
      width: 3rem;
    }
  }
  #btn_container{
    text-align:center;
    margin-top: .3rem;
    .c-btn{
      display: inline-block;
    }
  }
  #verify_fail{
    text-align: center;
    font-size: .4rem;
    height: 2.5rem;
    padding: .8rem 0 .5rem 0;
    color: @baseColor;
  }
}
</style>
